<template>
  <!--  <HeaderDetail />-->
  <div style="margin: 10px 6% 0 6%">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span class="search-card-title">Component Management</span>
        </div>
      </template>
      <el-row style="margin-bottom: 10px">
        <el-col :span="6">
          <span>Seq Name:</span>
          <el-input
            v-model="searchInfo.id"
            placeholder="Please input"
            style="width: 95%"
          />
        </el-col>
        <el-col :span="6">
          <span>Project Code:</span>
          <el-input
            v-model="searchInfo.note"
            multiple
            placeholder="Please input"
            style="width: 95%"
          />
        </el-col>
        <el-col :span="6">
          <span>Category:</span>
          <el-select
            v-model="searchInfo.compound"
            multiple
            style="width: 95%"
            placeholder=""
          >
            <el-option
              v-for="items in options1"
              :key="items.value"
              :label="items.label"
              :value="items.value"
            />
          </el-select>
        </el-col>
        <el-col :span="6">
          <span>Registration Date:</span>
          <el-date-picker
            v-model="searchInfo.date"
            type="daterange"
            unlink-panels
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            :shortcuts="shortcuts"
            style="width: 97%"
          />
        </el-col>
      </el-row>
      <el-row>
        <!--<el-col :span="2">
          <el-checkbox v-model="checked1" label="My Sequence" size="large" />
        </el-col>-->
        <el-col :span="6">
          <el-button type="primary">SEARCH</el-button>
          <el-button type="info">RESET</el-button>
          <el-button type="success" @click="goAdd()">
            <el-icon><plus /></el-icon>
            NEW</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <div style="margin: 10px 0 10px">
      <el-row>
        <el-col :span="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span class="search-card-title">Data Table</span>
                <el-col
                  :span="6"
                  :offset="16"
                  style="text-align: end; padding-right: 10px"
                >
                  <el-button plain="default" :icon="Download">
                    <el-icon><download /></el-icon>
                    Export to Excel
                  </el-button>
                </el-col>
              </div>
            </template>
            <el-table
              :data="tableData"
              border
              row-key="name"
              indent="0"
              style="width: 100%;"
            >
              <el-table-column fixed label="Seq Name" width="80">
                <template #default="scope">{{ scope.row.name }}</template>
              </el-table-column>
              <el-table-column property="date" label="Reg Date" width="100" />
              <el-table-column
                property="time"
                label="Project Code"
                width="100"
              />
              <el-table-column
                property="compound"
                label="Category"
                width="100"
              />
              <el-table-column
                property="cell"
                label="Description"
                width="200"
              />
              <el-table-column
                property="source"
                label="Protein Sequence"
                width="200"
              />
              <el-table-column label="DNA Sequence">
                <template #default="scope">
                  <!-- <div v-if="scope.row.subTree">
                    <div v-for="(item, index) in compareResult2" :key="index">
                      <p v-html="item"></p>
                    </div>
                  </div> -->
                  <p v-html="scope.row.note"></p>
                </template>
              </el-table-column>
              <el-table-column label="Operations" width="200">
                <template #default="scope">
                  <el-button
                    v-show="!scope.row.subTree"
                    type="primary"
                    size="small"
                    :icon="plus"
                    style="cursor: pointer"
                    class="operationButton1"
                    title="New Version"
                    @click="goAddNewVersion()"
                  >
                    <el-icon><plus /></el-icon
                  ></el-button>
                  <el-button
                    type="primary"
                    size="small"
                    :icon="Edit"
                    style="cursor: pointer"
                    class="operationButton2"
                    title="Edit"
                    @click="goAdd()"
                  >
                    <el-icon><edit-pen /></el-icon
                  ></el-button>
                  <el-popconfirm title="Are you sure to delete this?">
                    <template #reference>
                      <el-button
                        type="danger"
                        size="small"
                        style="cursor: pointer"
                        title="Delete"
                      >
                        <el-icon><delete /></el-icon>
                      </el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>

            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 100, 200, 300, 400]"
              layout="total, sizes, prev, pager, next"
              :total="20"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { ref, reactive, onMounted } from "vue";
// import HeaderDetail from "../../components/HeaderDetail.vue";
import {
  RemoveFilled,
  Download,
  Plus,
  Delete,
  Document,
  EditPen,
} from "@element-plus/icons-vue";
import router from "@/router";
export default {
  name: "SequenceManagement",
  components: {
    // HeaderDetail,
    // RemoveFilled,
    Download,
    Plus,
    Delete,
    Document,
    EditPen,
  },
  setup() {
    onMounted(() => {
      startCompare()
    })
    let tableData = reactive([
      {
        name: "H1",
        color: "#FFE0ED",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
        children: [
          {
            subTree: true,
            name: "H1-v1",
            color: "#FFE0ED",
            date: "2021.12.03",
            time: "CDI",
            compound: "sp",
            cell: "PMID25706993, HV309_HUMAN",
            source: "MELGLSWIFLLAILKGVQC",
            note: "ATTGAGCTCGGCATGAGCGGGATCATCCTGCTGACCACCCTGGAGGTCGTGAAGTGT",
          },
          {
            subTree: true,
            name: "H1-v2",
            color: "#FFE0ED",
            date: "2021.12.03",
            time: "CDI",
            compound: "sp",
            cell: "PMID25706993, HV309_HUMAN",
            source: "MELGLSWIFLLAILKGVQC",
            note: "ATTGAGCTCGGCATGAGCGGGATCATCCTGCTGACCACCCTGGAGGTCGTGAAGTGT",
          },
                    {
            subTree: true,
            name: "H1-v1",
            color: "#FFE0ED",
            date: "2021.12.03",
            time: "CDI",
            compound: "sp",
            cell: "PMID25706993, HV309_HUMAN",
            source: "MELGLSWIFLLAILKGVQC",
            note: "ATTGAGCTCGGCATGAGCGGGATCATACTGCTGACCTCCCTGGAGGFHGTGAAGTGT",
          },
        ],
      },
      {
        name: "H2",
        color: "#CDF6F2",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV321_HUMAN",
        source: "MELGLRWVFLVAILEGVQC",
        note: "ATGGAGCTGGGCCTGAGATGGGTGTTCCTGGTGGCCATCCTGGAAGGCGTGCAGTGC",
      },
      {
        name: "H3",
        color: "#D7E5FF",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PPMID25706993, APOA_HUMAN",
        source: "MKHLWFFLLLVAAPRWVLS",
        note: "ATGAAGCACCTGTGGTTCTTCCTGCTGCTGGTGGCCGCCCCTAGATGGGTGCTGAGC",
      },
      {
        name: "H4",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV102_HUMAN",
        source: "MDWTWRILFLVAAATGAHS",
        note: "ATGGACTGGACCTGGAGAATCCTGTTCCTGGTGGCCGCCGCTACAGGCGCCCACAGC",
      },
      {
        name: "H5",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV169_HUMAN",
        source: "MDWTWRFLFVVAAATGVQS",
        note: "ATGGACTGGACCTGGAGATTCCTGTTCGTGGTGGCCGCCGCTACAGGCGTGCAGAGC",
      },
      {
        name: "GSG",
        date: "2021.12.03",
        time: "CDI",
        compound: "Linker",
        cell: "GSG linker, PMID25621616",
        source: "GSG",
        note: "GGCTCTGGC",
      },
      {
        name: "IL10",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "IL10_HUMAN, Interleukin-10",
        source: "MHSSALLCCLVLLTGVRA",
        note: "ATGCACAGCTCAGCTCTGCTGTGCTGCCTGGTGCTTCTGACCGGCGTGCGGGCC",
      },
      {
        name: "3STOP",
        date: "2021.12.03",
        time: "CDI",
        compound: "stop",
        cell: "3 Stop Codons",
        source: "***",
        note: "TGATAATAG",
      },
      {
        name: "2STOP",
        date: "2021.12.03",
        time: "CDI",
        compound: "stop",
        cell: "2 Stop Codons",
        source: "**",
        note: "TAATGA",
      },
      {
        name: "H8",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T1",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T2",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T3",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T4",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T5",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T6",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T7",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "T8",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "IL10",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
      {
        name: "IL11",
        date: "2021.12.03",
        time: "CDI",
        compound: "sp",
        cell: "PMID25706993, HV309_HUMAN",
        source: "MELGLSWIFLLAILKGVQC",
        note: "ATGGAGCTGGGCCTGAGCTGGATCTTCCTGCTGGCCATCCTGAAGGGCGTGCAGTGC",
      },
    ]);
    const value2 = ref("");
    const shortcuts = [
      {
        text: "Last week",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          return [start, end];
        },
      },
      {
        text: "Last month",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          return [start, end];
        },
      },
      {
        text: "Last 3 months",
        value: () => {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          return [start, end];
        },
      },
    ];

    const goAddNewVersion = () => {
      router.push("/addNewVersion");
    };
    const goAdd = () => {
      router.push("/addSequenceRecord");
    };
    const goSet = () => {
      router.push("/setCutoff");
    };
    let compareResult1 = reactive([]);
    let compareResult2 = reactive([]);
    //比较两个字符串的不同，并且高亮标注
    function highlight() {
      var params = Array.prototype.slice.call(arguments);
      console.log("params",params);
      var result = params.map(function (e) {
        console.log(e, "e");
        e = e.toUpperCase();
        e = e.replace(
          /[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?]/g,
          ""
        );
        return e.split("");
      });
      var maxLen = eval(
        " Math.max(" +
          result
            .map(function (e) {
              return e.length;
            })
            .join(",") +
          ")"
      );
      result.forEach(function (e) {
        if (e.length < maxLen) {
          e.length = maxLen;
        }
      });
      var index = [];
      for (var i = 0; i < result[0].length; i++) {
        if (result[0][i] === result[1][i]) {
          continue;
        } else {
          index.push(i);
        }
      }

      index.forEach(function (e) {
        result[0][e] =
          "<span style='color:red'>" +
          (result[0][e] ? result[0][e] : "") +
          "</span>";
        result[1][e] =
          "<span style='color:red'>" +
          (result[1][e] ? result[1][e] : "") +
          "</span>";
      });
      return result;
    }
    const startCompare = () => {
      console.log("table----->", tableData);
      console.log(typeof tableData);
      for (let key in tableData) {
        let firstNote = tableData[key].note;
        if (typeof tableData[key].children != "undefined") {
          for (let item in tableData[key].children) {
            let secondNote = tableData[key].children[item].note;
            // console.log("firstNote,secondNote", firstNote, secondNote);
            let result = highlight(firstNote, secondNote);
            // console.log("结果在这------->", result);
            compareResult1.push(result[0].join(""));
            compareResult2.push(result[1].join(""));
            tableData[key].children[item].note = result[1].join("");
          }
        }
      }
      return false;
    }

    function distinct(arr) {
      var obj = {};
      var result = [];
      for (i = 0; i < arr.length; i++) {
        if (!obj[arr[i]]) {
          //如果能查找到，证明数组元素重复了
          obj[arr[i]] = 1;
          result.push(arr[i]);
        }
      }
      return result;
    }

    return {
      goAddNewVersion,
      goAdd,
      goSet,
      tableData,
      compareResult1,
      compareResult2,
      highlight,
      startCompare,
      distinct,
    };
  },
  data() {
    return {
      // compareResult1: "",
      // compareResult2: "",
      searchInfo: [
        {
          date: "",
          compound: "",
          source: "",
          cell: "",
        },
      ],
      currentPage: 1,
      pageSize: 10,
      options1: [
        {
          value: "sp",
          label: "sp",
        },
        {
          value: "linker",
          label: "linker",
        },
        {
          value: "2A",
          label: "2A",
        },
        {
          value: "fs",
          label: "fs",
        },
        {
          value: "stop",
          label: "stop",
        },
      ],
      options2: [
        {
          value: "1",
          label: "CRO",
        },
        {
          value: "2",
          label: "Internal",
        },
      ],
      options3: [
        {
          value: "1",
          label: "PMID25706993, HV309_HUMAN",
        },
        {
          value: "2",
          label: "PMID25706993",
        },
        {
          value: "3",
          label: "HV309_HUMAN",
        },
      ],
    };
  },
  // created() {
  //   this.startCompare();
  // },
  methods: {
    deleteSearchInfo(index) {
      try {
        this.searchInfo.splice(index, 1);
      } catch (e) {
        console.error("Error Deleting Detail Item: ", e);
      }
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
    },
  },
};
</script>
<style scoped>
.red {
  color: red;
}
.operationButton1 {
  margin-right: 10px;
}
.operationButton2 {
  margin: 0px 0px;
}
.search-card-title {
  font-size: 16px;
  font-weight: 500;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.download-icon {
  position: relative;
  top: 3px;
  color: #166fe7;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  width: 100%;
}
.el-card /deep/.el-card__header {
  background-color: #64bce7;
  padding: 6px;
}
.el-card /deep/.el-card__body {
  padding: 8px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px getCssVar("border-color");
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
